<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>AMLL Player Screenshot Tool</title>
    <style>
    </style>
</head>

<body>
    <!-- 为了避免加载主脚本时无法控制窗口，故独立编写标题栏的脚本 -->
    <div data-tauri-drag-region id="system-titlebar">
        <div id="system-titlebar-buttons">
            <button id="system-titlebar-minimize" class="system-button" style="color: currentColor;">
                <svg class="windows" width="10" height="2" viewBox="0 0 10 2" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M0.498047 1.39099C0.429688 1.39099 0.364583 1.37797 0.302734 1.35193C0.244141 1.32589 0.192057 1.29008 0.146484 1.24451C0.100911 1.19893 0.0651042 1.14685 0.0390625 1.08826C0.0130208 1.02641 0 0.961304 0 0.892944C0 0.824585 0.0130208 0.761108 0.0390625 0.702515C0.0651042 0.640666 0.100911 0.586955 0.146484 0.541382C0.192057 0.492554 0.244141 0.455119 0.302734 0.429077C0.364583 0.403035 0.429688 0.390015 0.498047 0.390015H9.50195C9.57031 0.390015 9.63379 0.403035 9.69238 0.429077C9.75423 0.455119 9.80794 0.492554 9.85352 0.541382C9.89909 0.586955 9.9349 0.640666 9.96094 0.702515C9.98698 0.761108 10 0.824585 10 0.892944C10 0.961304 9.98698 1.02641 9.96094 1.08826C9.9349 1.14685 9.89909 1.19893 9.85352 1.24451C9.80794 1.29008 9.75423 1.32589 9.69238 1.35193C9.63379 1.37797 9.57031 1.39099 9.50195 1.39099H0.498047Z"
                        fill="currentColor" fill-opacity="0.8956" />
                </svg>
            </button>
            <button id="system-titlebar-resize" class="system-button" style="color: currentColor;">
                <svg class="windows maximize" width="10" height="11" viewBox="0 0 10 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.47461 10.391C1.2793 10.391 1.09212 10.3519 0.913086 10.2738C0.734049 10.1924 0.576172 10.085 0.439453 9.95154C0.30599 9.81482 0.198568 9.65694 0.117188 9.47791C0.0390625 9.29887 0 9.11169 0 8.91638V1.8656C0 1.67029 0.0390625 1.48311 0.117188 1.30408C0.198568 1.12504 0.30599 0.968791 0.439453 0.835327C0.576172 0.698608 0.734049 0.591187 0.913086 0.513062C1.09212 0.431681 1.2793 0.390991 1.47461 0.390991H8.52539C8.7207 0.390991 8.90788 0.431681 9.08691 0.513062C9.26595 0.591187 9.4222 0.698608 9.55566 0.835327C9.69238 0.968791 9.7998 1.12504 9.87793 1.30408C9.95931 1.48311 10 1.67029 10 1.8656V8.91638C10 9.11169 9.95931 9.29887 9.87793 9.47791C9.7998 9.65694 9.69238 9.81482 9.55566 9.95154C9.4222 10.085 9.26595 10.1924 9.08691 10.2738C8.90788 10.3519 8.7207 10.391 8.52539 10.391H1.47461ZM8.50098 9.39001C8.56934 9.39001 8.63281 9.37699 8.69141 9.35095C8.75326 9.32491 8.80697 9.2891 8.85254 9.24353C8.89811 9.19796 8.93392 9.14587 8.95996 9.08728C8.986 9.02543 8.99902 8.96033 8.99902 8.89197V1.89001C8.99902 1.82166 8.986 1.75818 8.95996 1.69958C8.93392 1.63774 8.89811 1.58403 8.85254 1.53845C8.80697 1.49288 8.75326 1.45707 8.69141 1.43103C8.63281 1.40499 8.56934 1.39197 8.50098 1.39197H1.49902C1.43066 1.39197 1.36556 1.40499 1.30371 1.43103C1.24512 1.45707 1.19303 1.49288 1.14746 1.53845C1.10189 1.58403 1.06608 1.63774 1.04004 1.69958C1.014 1.75818 1.00098 1.82166 1.00098 1.89001V8.89197C1.00098 8.96033 1.014 9.02543 1.04004 9.08728C1.06608 9.14587 1.10189 9.19796 1.14746 9.24353C1.19303 9.2891 1.24512 9.32491 1.30371 9.35095C1.36556 9.37699 1.43066 9.39001 1.49902 9.39001H8.50098Z"
                        fill="currentColor" fill-opacity="0.8956" />
                </svg>
                <svg class="windows restore" width="10" height="10" viewBox="0 0 10 10" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M8.99902 2.96387C8.99902 2.69368 8.94531 2.43978 8.83789 2.20215C8.73047 1.96126 8.58398 1.75293 8.39844 1.57715C8.21615 1.39811 8.00293 1.25814 7.75879 1.15723C7.5179 1.05306 7.264 1.00098 6.99707 1.00098H2.08496C2.13704 0.851237 2.21029 0.714518 2.30469 0.59082C2.39909 0.467122 2.50814 0.361328 2.63184 0.273438C2.75553 0.185547 2.89062 0.118815 3.03711 0.0732422C3.18685 0.0244141 3.34147 0 3.50098 0H6.99707C7.41048 0 7.79948 0.0797526 8.16406 0.239258C8.52865 0.395508 8.84603 0.608724 9.11621 0.878906C9.38965 1.14909 9.60449 1.46647 9.76074 1.83105C9.92025 2.19564 10 2.58464 10 2.99805V6.49902C10 6.65853 9.97559 6.81315 9.92676 6.96289C9.88118 7.10938 9.81445 7.24447 9.72656 7.36816C9.63867 7.49186 9.53288 7.60091 9.40918 7.69531C9.28548 7.78971 9.14876 7.86296 8.99902 7.91504V2.96387ZM1.47461 10C1.2793 10 1.09212 9.96094 0.913086 9.88281C0.734049 9.80143 0.576172 9.69401 0.439453 9.56055C0.30599 9.42383 0.198568 9.26595 0.117188 9.08691C0.0390625 8.90788 0 8.7207 0 8.52539V3.47656C0 3.27799 0.0390625 3.09082 0.117188 2.91504C0.198568 2.736 0.30599 2.57975 0.439453 2.44629C0.576172 2.30957 0.732422 2.20215 0.908203 2.12402C1.08724 2.04264 1.27604 2.00195 1.47461 2.00195H6.52344C6.72201 2.00195 6.91081 2.04264 7.08984 2.12402C7.26888 2.20215 7.42513 2.30794 7.55859 2.44141C7.69206 2.57487 7.79785 2.73112 7.87598 2.91016C7.95736 3.08919 7.99805 3.27799 7.99805 3.47656V8.52539C7.99805 8.72396 7.95736 8.91276 7.87598 9.0918C7.79785 9.26758 7.69043 9.42383 7.55371 9.56055C7.42025 9.69401 7.264 9.80143 7.08496 9.88281C6.90918 9.96094 6.72201 10 6.52344 10H1.47461ZM6.49902 8.99902C6.56738 8.99902 6.63086 8.986 6.68945 8.95996C6.7513 8.93392 6.80501 8.89811 6.85059 8.85254C6.89941 8.80697 6.93685 8.75488 6.96289 8.69629C6.98893 8.63444 7.00195 8.56934 7.00195 8.50098V3.50098C7.00195 3.43262 6.98893 3.36751 6.96289 3.30566C6.93685 3.24382 6.90104 3.1901 6.85547 3.14453C6.8099 3.09896 6.75618 3.06315 6.69434 3.03711C6.63249 3.01107 6.56738 2.99805 6.49902 2.99805H1.49902C1.43066 2.99805 1.36556 3.01107 1.30371 3.03711C1.24512 3.06315 1.19303 3.10059 1.14746 3.14941C1.10189 3.19499 1.06608 3.2487 1.04004 3.31055C1.014 3.36914 1.00098 3.43262 1.00098 3.50098V8.50098C1.00098 8.56934 1.014 8.63444 1.04004 8.69629C1.06608 8.75488 1.10189 8.80697 1.14746 8.85254C1.19303 8.89811 1.24512 8.93392 1.30371 8.95996C1.36556 8.986 1.43066 8.99902 1.49902 8.99902H6.49902Z"
                        fill="currentColor" fill-opacity="0.8956" />
                </svg>
            </button>
            <button id="system-titlebar-close" class="system-button" style="color: currentColor;">
                <svg class="windows" width="10" height="11" viewBox="0 0 10 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M5 6.099L0.854492 10.2445C0.756836 10.3422 0.639648 10.391 0.50293 10.391C0.359701 10.391 0.239258 10.3438 0.141602 10.2494C0.0472005 10.1517 0 10.0313 0 9.88806C0 9.75134 0.0488281 9.63416 0.146484 9.5365L4.29199 5.39099L0.146484 1.24548C0.0488281 1.14783 0 1.02901 0 0.889038C0 0.820679 0.0130208 0.755575 0.0390625 0.693726C0.0651042 0.631877 0.100911 0.579793 0.146484 0.537476C0.192057 0.491903 0.245768 0.456095 0.307617 0.430054C0.369466 0.404012 0.43457 0.390991 0.50293 0.390991C0.639648 0.390991 0.756836 0.439819 0.854492 0.537476L5 4.68298L9.14551 0.537476C9.24316 0.439819 9.36198 0.390991 9.50195 0.390991C9.57031 0.390991 9.63379 0.404012 9.69238 0.430054C9.75423 0.456095 9.80794 0.491903 9.85352 0.537476C9.89909 0.583049 9.9349 0.636759 9.96094 0.698608C9.98698 0.757202 10 0.820679 10 0.889038C10 1.02901 9.95117 1.14783 9.85352 1.24548L5.70801 5.39099L9.85352 9.5365C9.95117 9.63416 10 9.75134 10 9.88806C10 9.95642 9.98698 10.0215 9.96094 10.0834C9.9349 10.1452 9.89909 10.1989 9.85352 10.2445C9.8112 10.2901 9.75911 10.3259 9.69727 10.3519C9.63542 10.378 9.57031 10.391 9.50195 10.391C9.36198 10.391 9.24316 10.3422 9.14551 10.2445L5 6.099Z"
                        fill="currentColor" fill-opacity="0.8956" />
                </svg>
            </button>
        </div>
        <style scoped>
            body[data-amll-lyrics-open] #system-titlebar {
                color: white;
            }

            #system-titlebar {
                z-index: 10000;
                display: flex;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 32px;
                flex-direction: row;
                /* 因为有可能是移动设备，默认隐藏标题栏 */
                display: none;
                color: black;
            }

            @media (prefers-color-scheme: dark) {
                #system-titlebar {
                    color: white;
                }
            }

            #system-titlebar.fullscreen {
                display: none !important;
            }

            #system-titlebar-buttons {
                display: flex;
                gap: 2px;
            }

            #system-titlebar.immersive {
                transition: opacity 0.5s;
                opacity: 0;
            }

            #system-titlebar.immersive:hover {
                opacity: 1;
            }

            .system-button {
                border: none;
                background: transparent;
            }

            .system-button>svg {
                display: none;
            }

            #system-titlebar.windows {
                height: 32px;
            }

            #system-titlebar.mac-os {
                display: flex;
                height: 32px;
            }

            #system-titlebar.mac-os>* {
                display: none;
            }

            #system-titlebar.windows .system-button {
                transition: background-color 0.25s, color 0.25s;
                transform: translateY(-0.5px);
            }

            #system-titlebar.windows .system-button:hover {
                transition: background-color 0.15s, color 0.15s;
            }

            #system-titlebar.windows .system-button:hover {
                background-color: rgba(255, 255, 255, 0.0605);
                color: white;
            }

            #system-titlebar.windows .system-button:active {
                background-color: rgba(255, 255, 255, 0.0419);
            }

            #system-titlebar.windows #system-titlebar-close:hover {
                background-color: rgb(196, 43, 28);
            }

            #system-titlebar.windows #system-titlebar-close:active {
                background-color: rgba(196, 43, 28, 0.9);
            }

            .system-button>svg:not(.maximize, .restore) {
                display: block;
            }

            #system-titlebar-resize.maximize>svg.maximize {
                display: block;
            }

            #system-titlebar-resize.restore>svg.restore {
                display: block;
            }

            #system-titlebar.windows {
                justify-content: flex-end;
                display: flex;
            }

            #system-titlebar.windows .system-button {
                width: 46px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
        <script>
            "use-strict";
            {
                const titlebar = document.getElementById("system-titlebar");
                const buttons = document.getElementById(
                    "system-titlebar-buttons"
                );
                const closeBtn = document.getElementById(
                    "system-titlebar-close"
                );
                const minimizeBtn = document.getElementById(
                    "system-titlebar-minimize"
                );
                const resizeBtn = document.getElementById(
                    "system-titlebar-resize"
                );
                closeBtn.addEventListener("click", () => {
                    window.dispatchEvent(
                        new Event("on-system-titlebar-click-close")
                    );
                });
                minimizeBtn.addEventListener("click", () => {
                    window.dispatchEvent(
                        new Event("on-system-titlebar-click-minimize")
                    );
                });
                resizeBtn.addEventListener("click", () => {
                    window.dispatchEvent(
                        new Event("on-system-titlebar-click-resize")
                    );
                });
                window.SystemTitlebarAppearance = {
                    Windows: "windows",
                    MacOS: "macos",
                    Hidden: "hidden",
                };
                window.SystemTitlebarResizeAppearance = {
                    Restore: "restore",
                    Maximize: "maximize",
                };
                let currentAppearance = localStorage.getItem(
                    "system-titlebar-appearance"
                );
                function updateTitlebarVariable() {
                    if (
                        currentAppearance ===
                        SystemTitlebarAppearance.Windows
                    ) {
                        titlebar.classList.add("windows");
                        document.body.style.setProperty(
                            "--system-titlebar-height",
                            `${titlebar.clientHeight}px`
                        );
                        document.body.style.setProperty(
                            "--system-titlebar-safe-padding-left",
                            "0px"
                        );
                        document.body.style.setProperty(
                            "--system-titlebar-safe-padding-right",
                            `${buttons.clientHeight}px`
                        );
                    } else if (
                        currentAppearance === SystemTitlebarAppearance.MacOS
                    ) {
                        titlebar.classList.add("mac-os");
                        document.body.style.setProperty(
                            "--system-titlebar-height",
                            `${titlebar.clientHeight}px`
                        );
                        document.body.style.setProperty(
                            "--system-titlebar-safe-padding-left",
                            `${buttons.clientHeight}px`
                        );
                        document.body.style.setProperty(
                            "--system-titlebar-safe-padding-right",
                            "0px"
                        );
                    }
                }
                const buttonsObz = new ResizeObserver(
                    updateTitlebarVariable
                );
                buttonsObz.observe(buttons);
                window.setSystemTitlebarAppearance =
                    function setSystemTitlebarAppearance(appearance) {
                        currentAppearance = appearance;
                        localStorage.setItem(
                            "system-titlebar-appearance",
                            appearance
                        );
                        titlebar.classList.remove("mac-os", "windows");
                        if (
                            appearance === SystemTitlebarAppearance.Windows
                        ) {
                            titlebar.classList.add("windows");
                        } else if (
                            appearance === SystemTitlebarAppearance.MacOS
                        ) {
                            titlebar.classList.add("mac-os");
                        }
                        updateTitlebarVariable();
                    };
                window.setSystemTitlebarResizeAppearance =
                    function setSystemTitlebarResizeAppearance(appearance) {
                        const resizeButton = document.getElementById(
                            "system-titlebar-resize"
                        );
                        resizeButton.classList.remove(
                            "maximize",
                            "restore"
                        );
                        resizeButton.classList.add(appearance);
                    };
                window.setSystemTitlebarImmersiveMode =
                    function setSystemTitlebarImmersiveMode(enabled) {
                        if (enabled) {
                            titlebar.classList.add("immersive");
                        } else {
                            titlebar.classList.remove("immersive");
                        }
                    };
                window.setSystemTitlebarFullscreen =
                    function setSystemTitlebarFullscreen(enabled) {
                        if (enabled) {
                            titlebar.classList.add("fullscreen");
                        } else {
                            titlebar.classList.remove("fullscreen");
                        }
                    };
                function initPlatform() {
                    const userAgent = navigator.userAgent;
                    if (
                        userAgent.includes("Windows") ||
                        userAgent.includes("Linux")
                    ) {
                        setSystemTitlebarAppearance(
                            SystemTitlebarAppearance.Windows
                        );
                    } else if (userAgent.includes("Macintosh")) {
                        setSystemTitlebarAppearance(
                            SystemTitlebarAppearance.MacOS
                        );
                    } else {
                        setSystemTitlebarAppearance(
                            SystemTitlebarAppearance.Hidden
                        );
                    }
                }
                if (navigator.userAgent.includes("Android")) {
                    setSystemTitlebarAppearance(SystemTitlebarAppearance.Hidden);
                } else if (currentAppearance) {
                    setSystemTitlebarAppearance(currentAppearance);
                } else {
                    initPlatform();
                }
                setSystemTitlebarResizeAppearance(
                    SystemTitlebarResizeAppearance.Maximize
                );
            }
        </script>
    </div>
    <div id="root"></div>
    <script type="module" defer src="/src/screenshot.tsx"></script>
</body>

</html>